<template>
  <div>
    <div class="head">
      <div class="img">
        <img src="../../assets/NJUST.jpeg" />
      </div>
      <div class="person">
        <img src="../../assets/用户名.png" />
        <li class="li1">
          <a href="javascript:;" @click="$router.push('/login')" v-if="uID === -1">
            <span>登录</span>
          </a>
          <a href="javascript:;" @click="checkLogin() && $router.push('/person')" v-else>
            <span>个人主页</span>
          </a>
        </li>
      </div>
      <div class="list">
        <img src="../../assets/购物车.png" />
        <li class="li1">
          <a href="javascript:;" @click="checkLogin() && $router.push('/sample')">
            <span>我的清单</span>
          </a>
        </li>
      </div>
    </div>

    <div class="app-container">
      <div class="search-container">
        <!-- <search class="search" v-model="searchText" /> -->
        <input type="text" v-model="searchText" placeholder="请输入项目名称/国标">
        <button @click="searchItems(searchText)">搜索</button>
      </div>
    </div>

    <div class="background-image">
      <div class="content">
        <div class="nav">
          <router-link to="/home1"><span>标准</span></router-link>
          <router-link to="/home1"><span>/</span><span>{{ staName}}</span></router-link>
        </div>

        <!-- <div class="back">
          <img src="../../assets/返回.png" @click="goBack" />
        </div> -->

        <div>
          <table class="standards-table">
            <thead>
              <tr>
                <th>项目名称</th>
                <th>标准编号（含年号）及条款号</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item) in paginatedItems" :key="item.pjId">
                <td>{{ item.pjName }}</td>
                <td>{{ item.pjGB }}</td>
                <td>
                  <span class="action-link">
                    <a href="javascript:void(0);" class="view-link" @click="showItem(item)">查看</a>
                  </span>
                  <!-- <button class="view-item-button" @click="showItem(item)">查看项目</button>
                  <button class="delete-item-button" @click="deleteItem(item)">删除</button>
                  <button class="view-sample-button" @click="showSample(item)">查看样品</button> -->
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="block">
          <!--<span class="demonstration">直接前往</span>-->
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="currentPage"
                         :page-size="pageSize"
                         layout="prev, pager, next, jumper"
                         :total="filteredItems.length">
          </el-pagination>
        </div>

        <a href="javascript:void(0);" class="feedback" @click="toggleChatbot">没找到？反馈给我们</a>

        <!-- 遮罩层 -->
        <div v-if="isChatbotVisible" class="chatbot-mask"></div>

        <!-- 弹出框 -->
        <div v-if="isChatbotVisible" class="chatbot-popup">
          <h2>留言板</h2>
          <textarea v-model="message" rows="4" cols="50" placeholder="请输入您的留言..."></textarea>
          <div class="popup-actions">
            <el-button type="primary" @click="submitMessage">提交留言</el-button>
            <el-button @click="toggleChatbot">关闭</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>


<script>
  export default {
    name: "Home2",
    data() {
      return {
        staName:'',
        staId:'',
        currentPage: 1, // 当前页码
        pageSize: 5, // 每页显示的数据条数
        isChatbotVisible: false, // 控制弹出框显示
        message: '', // 绑定留言内容
        searchQuery: '',
        items: [
          // 示例数据，实际数据应从后端获取
          //{ pjName: '全部项目', pjGB: 'GB 19083-2023'},
        ],
        searchText: '',

        dialogVisible: false,
        form: {
          category: '',
          productName: '',
          standardNumber: '',
          standardName: ''
        },
        formLabelWidth: '120px',
        uID: null, // 添加uID属性
      };
    },
    created: function () {
      const receivedParam = this.$route.params.param;
      this.staName = this.$route.params.param1;this.staId = this.$route.params.param;
      console.log(receivedParam);
      this.$http.get("/host/project", {
        params: {
          staId: receivedParam
        }
      }).then((result) => {
        console.log(result.data);
        this.items = result.data;
      });
      // 获取uID
      this.$http.get("/getuID").then((result) => {
        console.log("uID:" + result.data);
        this.uID = result.data;
      });
    },
    computed: {
      filteredItems() {
        if (!this.searchText) {
          return this.items;
        }
        else {
          return this.items;
        }

        // return this.items.filter(item => {
        //   return Object.values(item).some(value =>
        //     value.toString().toLowerCase().includes(this.searchText.toLowerCase())
        //   );
        // });
      },
      paginatedItems() {
        // 计算当前页面应该显示的数据
        const start = (this.currentPage - 1) * this.pageSize;
        const end = this.currentPage * this.pageSize;
        return this.filteredItems.slice(start, end);
      },
    },
    methods: {
      created() {
        const params = this.$route.params;
        console.log(params.staId); // 打印大类
    // 你可以在这里根据参数进行后续操作
  },
      handleViewSample(row) {
        console.log('查看样品:', row);
        // 这里可以添加查看样品的逻辑
      },
      processImportedData(data) {
        // 假设数据是一个二维数组，每个子数组代表一行
        // 如果Excel有标题行，header应该设置为1，那么这里从索引1开始取值
        this.items = data.map((row, index) => {
          return {
            id: index + 1, // 假设每行有一个唯一的ID
            category: row[0], // 假设第一列是类别
            productName: row[1], // 假设第二列是产品名
            standardNumber: row[2], // 假设第三列是标准编号
            standardName: row[3] // 假设第四列是标准名称
          };
        });
      },
      showItem(item) {
        if (!this.checkLogin()) return;
        // 使用 Vue Router 跳转到 standar.vue 组件
        this.$router.push({ name: 'module', params: { pjId: item.pjId,staName:this.staName,pjName:item.pjName,staId:this.staId } });
      },
      goBack() {
        this.$router.push({ path: '/home1' });
      },
      searchItems(searchText) {
        console.log(this.searchText);
        this.$http.post('/searchProject', this.searchText, {
          headers: {
            'Content-Type': 'text/plain' // 根据后端接口的要求，可能需要修改内容类型
          }
        }).then(response => {
          console.log(response.data);
          console.log(searchText);
          this.items = response.data;
          // return this.items;
        }).catch(error => {
          // 处理错误情况
          console.log(error);
        });
      },
       toggleChatbot() {
        if (!this.checkLogin()) return;
        this.isChatbotVisible = !this.isChatbotVisible; // 切换弹出框显示状态
      },
      submitMessage() {
        // 提交留言的逻辑
        console.log('留言内容:', this.message);
        // 可以在这里添加代码将留言发送到服务器
        this.$http.put(`/insertFeedback/${this.message}`).then((response)=>{
          
        }),
        this.isChatbotVisible = false; // 提交��隐藏弹出框
        this.message = ''; // 清空留言内容
      },
      handleSizeChange(newSize) {
        // 处理每页数据条数变化的事件
        this.pageSize = newSize;
      },
      handleCurrentChange(newPage) {
        // 处理页码变化的事件
        this.currentPage = newPage;
      },
      checkLogin() {
        if (this.uID === -1) {
          this.$confirm('您还未登录，请先登录', '提示', {
            confirmButtonText: '去登录',
            showCancelButton: false,
            type: 'warning'
          }).then(() => {
            this.$router.push('/login');
          });
          return false;
        }
        return true;
      },
    },
  };
</script>

<style scoped>

  .head {
    width: 100vw;
    background-color: #abe0f3;
    height: 6vh;
  }

    .head .img {
      height: 100%;
      float: left;
    }

      .head .img img {
        height: 100%;
      }

    .head .list {
      float: right;
      height: 45%;
    }

      .head .list img {
        margin-top: 15px;
        margin-right: 7px;
        height: 100%;
        float: left;
      }

      .head .list li {
        margin-top: 20px;
        margin-right: 40px;
        display: block;
        float: left;
        font-size: 18px;
      }

    .head .person {
      float: right;
      height: 42%;
    }

      .head .person img {
        margin-top: 15px;
        margin-right: 7px;
        height: 100%;
        float: left;
      }

      .head .person li {
        margin-top: 20px;
        margin-right: 70px;
        display: block;
        float: left;
        font-size: 18px;
      }

  .app-container {
    /*    margin-top: 9vh;*/
    width: 98vw;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    float: left;
  }

  .search-container {
    /* 添加一些样式 */
    width: 100%;
    max-width: 600px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    margin: 20px;
  }

    .search-container input {
      margin-right: 10px;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      width: 600px;
      height: 40px;
      font-size: 15px;
    }

    .search-container button {
      padding: 11px 15px;
      border: none;
      border-radius: 4px;
      background-color: #007bff;
      color: white;
      cursor: pointer;
      width: 100px;
      font-size: 16px;
    }

      .search-container button:hover {
        background-color: #0056b3;
      }

  .background-image {
    float: left;
    width: 100vw;
    height: 80vh;
    margin-top: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 0;
  }

    .background-image::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url("../../assets/Home-bg.jpg") center/cover no-repeat;
      z-index: -1;
      filter: blur(8px);
    }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 95%;
    width: 1200px;
    border-radius: 10px;
    background-color: #FFFFFF;
    position: relative; /* Added to position the nav absolutely */
  }

  .nav {
    position: absolute;
    top: 0;
    left: 0;
    margin: 50px; /* Adjusted margin for spacing */
    text-align: left;
  }

    .nav a {
      color: #606266;
      text-decoration: none;
    }

      .nav a:hover {
        color: #606266;
        text-decoration: underline;
      }

      .nav a span {
        font-size: 30px;
        cursor: pointer;
      }

      .nav a:hover span,
      .nav a:active span {
        color: #606266;
        text-decoration: underline;
      }

  .back {
    float: right;
    margin-top: 50px;
    margin-right: -1000px;
  }

    .back img {
      height: 50px;
      cursor: pointer; /* 当鼠标悬停时显示为手型 */
    }

  .standards-table {
    margin-top: 18vh;
    width: 100%;
    border-collapse: collapse;
  }

    .standards-table th,
    .standards-table td {
      padding: 20px;
      border: 1px solid #ddd;
      text-align: center;
    }

    .standards-table th {
      background-color: #f8f9fa;
    }

  /* 添加竖线和间距的样式 */
  .action-link {
    margin: 0 5px; /* 添加间距 */
  }

  .action-divider {
    margin: 0 5px; /* 添加间距 */
    color: #ddd; /* 设置竖线颜色 */
  }

  /* 设置a标签的字体颜色 */
  .view-link {
    padding: 20px;
    text-align: center;
    color: green; /* 查看项目字体颜色 */
  }

  /* a标签的样式 */
  .view-link,
  .delete-link,
  .sample-link {
    text-decoration: none; /* 移除下划线 */
    cursor: pointer;
  }

  .feedback {
    position: fixed;
    margin-top: 70vh;
    color: gray;
  }

  .chatbot-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    z-index: 1000; /* 确保弹出框在最上层 */
  }

  .chatbot-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* ���色半透明遮罩 */
    z-index: 999; /* 遮罩层在弹出框下一层 */
  }

  .popup-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }

  .chatbot-popup h2 {
    margin-top: 0; /* 移除标题的上边距 */
  }

  .chatbot-popup textarea {
    width: 100%;
    margin-bottom: 10px;
  }

  .block {
    margin-top: 2vh;
  }
</style>
